
import React, { useState, useEffect } from 'react';
// 引入css
import obj from './css/Login.module.scss'
// 引入antd中所需要的组件
import { Button, Card, Form, Input, message } from 'antd'
// 引入图标字体
import { UserOutlined, LockOutlined } from '@ant-design/icons'
// 引入跳转的hooks
import { useNavigate } from 'react-router-dom'
import { loginAPI, getCodeImg } from '../service/auth'
import { setToken } from '../utils/auth'


function Login() {
    useEffect(() => {
        fetchData();
    }, []);
 
    const [codeUrl,setCodeUrl] = useState('')
    const [uuid,setUuid] = useState('')

    const fetchData = async () => {
        try {
            const res = await getCodeImg()
            setCodeUrl("data:image/gif;base64," + res.img)
            setUuid(res.uuid)
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    };
  // 调用跳转的hooks
  const navigate = useNavigate()
  return (
    <div className={obj.box}>
      <div className={obj.login}>
        <Card
          title="react后台管理系统"
          style={{ width: 420, height: 480, marginLeft: 520, marginTop: 80 }}
        >
          <Form
            //点击提交按钮，会触发form中的事件
            onFinish={async (v) => {
              // 参数v表示获取到的参数值
              console.log(v, uuid)
              let params = {
                username: v.uname,
                password: v.upwd,
                code: v.code,
                uuid: uuid
              }
              console.log(params)
              //请求接口
              const res = await loginAPI(params)
              //如果登录成功
              if (res.code = 200) {
                // 提示消息
                //设置token
                setToken(res.token)
                message.success('登录成功')
                // 编程式跳转
                navigate('/admin')
              } else {
                message.error('登陆失败')
              }

            }}
          >
            {/* 给表单控件设置参数名 */}
            <Form.Item
              name='uname'
              rules={[
                // 设置校验
                // 进行非空的验证
                {
                  required: true, //开启
                  message: '用户名不能为空'  //提示信息
                }
              ]}
            >
              <Input placeholder='请输入用户名' size='large' prefix={<UserOutlined />} />
            </Form.Item>
            <Form.Item
              name='upwd'
              rules={[
                {
                  required: true,
                  message: '密码不能为空'
                }
              ]}
            >
              <Input type='password' placeholder='请输入密码' size='large' prefix={<LockOutlined />} />
            </Form.Item>
            <Form.Item
              name='code'
              rules={[
                {
                  required: true,
                  message: '密码不能为空'
                }
              ]}
            >
              <div>
                <Input placeholder='请输入密码' size='large' prefix={<LockOutlined />} />
                
                <div className="login-code">
                  <img src={codeUrl} className="login-code-img"/>
                </div>
              </div>
            </Form.Item>
            
            <Form.Item>
              {/* 在按钮指定为这是一个提交按钮 */}
              <Button type='primary' htmlType='submit' block size='large'>登录</Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  )
}

export default Login

